/* hook组件 useCallback */
import React, {useCallback, useState} from 'react'
import {Button} from 'antd'

/*
*  const xxx = useCallback(callback,[依赖])
*   + 组件第一次渲染，useCallback执行，创建一个函数"callback"，赋值给 xxx
*   + 组件后续每一次更新，判断依赖的状态值是否改变
*       如果改变，则重新创建的函数堆，赋值给xxx，没有改变(或没有设置依赖)，不会创建新函数
*   + 或者说，基于 useCallback 可以始终获取第一次创建函数的堆内存地址(或说函数引用)
* */
let prev
const Demo = function () {
    let [x, setX] = useState(0)

    const handle = useCallback(() => {

    }, []) // 第一次 0x001 第二次 0x101
    if (!prev) {
        prev = handle
    } else {
        console.log(handle === prev) // false
    }

    return <div className="vote-box">
        <div className="main">
            <p>{x}</p>
        </div>
        <div className="footer">
            <Button onClick={() => setX(x + 1)}>累加</Button>
        </div>
    </div>
}

export default Demo